import React from 'react';
import { Table } from 'antd';
import { connect } from 'react-redux';
import { fetchTags } from "../../../actions/usersActions";

import { Link } from 'react-router' ; 
const { Column } = Table;
var defaultPagination =  { pageSize:10,current:1} ;
class TagList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            pagination:defaultPagination,
            loading: false,
            selectedRowKeys:[]
        }
    }

    componentDidMount(){
        this.props.fetchTags(this.state.pagination.current,this.state.pagination.pageSize);
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
        this.props.onSelectChange(selectedRowKeys);
    }

    handleTableChange = (pagination, filters, sorter) => {
       const pager = this.state.pagination;
        pager.current = pagination.current; 
        this.setState({
            pagination: pager,
        });
    }

    render() {
        const { selectedRowKeys } = this.state;

        const rowSelection = {
                selectedRowKeys,
                onChange: this.onSelectChange,
                onSelect: (record, selected, selectedRows) => {
                    if ("onSelect" in this.props) {
                        this.props.onSelect(selectedRows);
                    }
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    if ("onSelect" in this.props) {
                        this.props.onSelect(selectedRows);
                    }
                }
            };

        return (
            <div>
                <Table 
                    rowKey={record => record.id}
                    dataSource={this.props.tags} 
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange}
                    rowSelection={rowSelection}
                    >
                    <Column
                        title="ID"
                        dataIndex="id"
                        key="id"
                        render={ id => <Link to={`/admin/tags/${id}`} > { id }  </Link> }
                    />
                    <Column
                        title="组"
                        dataIndex="name"
                        key="name"
                    />
                </Table>    
            </div>
        );
    }
}

TagList.propTypes = {
    fetchTags: React.PropTypes.func.isRequired,
};


TagList.contextTypes = {
  router: React.PropTypes.object.isRequired
}

const mapStateToProps = (state) => {
  return { 
      tags: state.user.tags,
  }
}


export default connect(mapStateToProps,{fetchTags})(TagList);